<template>
    <div class="page">
        <div class="scorll">
            <div class="content">
                <div class="card flexbet top">
                    <div class="left">
                        <p class="f20 bold">星河湾三期深基坑工程</p>
                        <p class="desc">
                            建筑深度 · -18.5米 · 2025年4月20日开工 ·
                            预计2025年10月30日完工
                        </p>
                        <div class="flexbet">
                            <div class="flexrow cent">
                                <img
                                    class="img20"
                                    src="../../../static/pit/set.png"
                                />
                                <span class="">42个监测点</span>
                            </div>
                            <div class="flexrow cent">
                                <img
                                    class="img20"
                                    src="../../../static/pit/clock.png"
                                />
                                <span>监测中</span>
                            </div>
                        </div>
                    </div>
                    <ul class="flexbet right">
                        <li
                            v-for="(item, index) in topList"
                            :key="index"
                            class="flexbet"
                        >
                            <div class="flexcol">
                                <span class="f14">{{ item.name }}</span>
                                <span
                                    class="f24 bold"
                                    :class="index == 2 ? 'pink' : 'black'"
                                    >{{ item.val }}{{ item.unit }}</span
                                >
                                <span
                                    class="f12"
                                    v-if="item.changeStatus"
                                    :class="
                                        item.changeStatus == 1
                                            ? 'green'
                                            : 'yellow'
                                    "
                                >
                                    <i
                                        class="bold"
                                        :class="
                                            item.changeStatus == 1
                                                ? 'el-icon-bottom'
                                                : 'el-icon-top'
                                        "
                                    ></i>
                                    {{ item.changeData
                                    }}{{ item.unit }}较昨日</span
                                >
                                <span class="f12 pink" v-else
                                    ><i class="el-icon-warning"></i
                                    >{{ item.changeData }}个高优先级</span
                                >
                            </div>
                            <div
                                class="iconbox"
                                :class="index == 2 ? 'pinkbg' : ''"
                            >
                                <img
                                    class="img20"
                                    :src="
                                        '../../../static/pit/top' +
                                        index +
                                        '.png'
                                    "
                                />
                            </div>
                        </li>
                    </ul>
                </div>

                <el-row class="mb30" :gutter="20">
                    <el-col :span="16">
                        <div class="item card height1">
                            <div class="title flexbet">
                                <div class="flexrow cent">
                                    <img
                                        class="img20"
                                        src="../../../static/pit/arrow.png"
                                    />
                                    <span class="bold">位移监测</span>
                                </div>
                                <ul>
                                    <li
                                        v-for="(item, index) in btns"
                                        :key="index"
                                        class="btntag"
                                        :class="
                                            index == active0 ? 'active0' : ''
                                        "
                                        @click="changeActive0(index)"
                                    >
                                        {{ item }}
                                    </li>
                                </ul>
                            </div>
                            <ul class="flexbet displaceList">
                                <li
                                    v-for="(item, index) in displaceList"
                                    :key="index"
                                >
                                    <div class="flexbet">
                                        <div class="flexcol">
                                            <span class="f14">{{
                                                item.name
                                            }}</span>
                                            <span class="f22 bold black"
                                                >{{ item.val
                                                }}{{ item.unit }}</span
                                            >
                                            <span
                                                class="f12"
                                                :class="
                                                    item.status
                                                        ? 'yellow'
                                                        : 'green'
                                                "
                                            >
                                                <i
                                                    class="bold"
                                                    :class="
                                                        item.changeStatus
                                                            ? 'el-icon-warning'
                                                            : 'el-icon-success'
                                                    "
                                                ></i>
                                                {{
                                                    item.status
                                                        ? "接近预警值"
                                                        : "安全范围内"
                                                }}</span
                                            >
                                        </div>
                                        <div class="iconbox">
                                            <img
                                                v-if="index == 2"
                                                class="img20"
                                                :src="'../../../static/pit/biao.png'"
                                            />
                                            <img
                                                v-else
                                                class="img20"
                                                :src="
                                                    '../../../static/pit/top' +
                                                    index +
                                                    '.png'
                                                "
                                            />
                                        </div>
                                    </div>

                                    <el-progress
                                        class="mt10"
                                        :percentage="item.percent"
                                        :color="
                                            item.status ? '#FFAA33' : '#36D399'
                                        "
                                        :show-text="false"
                                    ></el-progress>
                                </li>
                            </ul>
                            <div
                                id="displacementTrend"
                                style="width: 100%; height: 340px"
                            ></div>
                        </div>
                        <div class="item card">
                            <div class="title flexbet">
                                <div class="flexrow cent">
                                    <img
                                        class="img20"
                                        src="../../../static/pit/ping.png"
                                    />
                                    <span class="bold">应力监测</span>
                                </div>
                                <span class="blue f14"
                                    >查看全部 <i class="el-icon-arrow-right"></i
                                ></span>
                            </div>
                            <el-table
                                class="table"
                                :data="tableData"
                                style="width: 100%"
                            >
                                <el-table-column label="监测点" width="250">
                                    <template slot-scope="scope">
                                        <div class="flexrow cent">
                                            <div
                                                class="imgbox"
                                                :class="
                                                    scope.row.status == 2
                                                        ? 'redbg'
                                                        : ''
                                                "
                                            >
                                                <img
                                                    v-if="scope.row.status == 2"
                                                    class="img20"
                                                    :src="
                                                        '../../../static/pit/table' +
                                                        scope.row.type +
                                                        scope.row.status +
                                                        '.png'
                                                    "
                                                />
                                                <img
                                                    v-else
                                                    class="img20"
                                                    :src="
                                                        '../../../static/pit/table' +
                                                        scope.row.type +
                                                        '.png'
                                                    "
                                                />
                                            </div>
                                            <div class="flexcol">
                                                <span>{{
                                                    scope.row.name
                                                }}</span>
                                                <span class="f12">{{
                                                    scope.row.location
                                                }}</span>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="typeName" label="类型">
                                </el-table-column>
                                <el-table-column label="当前值">
                                    <template slot-scope="scope">
                                        <span
                                            :class="
                                                scope.row.status == 2
                                                    ? 'pink'
                                                    : ''
                                            "
                                            >{{
                                                scope.row.realData +
                                                scope.row.unit
                                            }}</span
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column label="警戒值">
                                    <template slot-scope="scope">
                                        {{
                                            scope.row.warningData +
                                            scope.row.unit
                                        }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="状态">
                                    <template slot-scope="scope">
                                        <el-tag
                                            class="tabletag"
                                            :class="
                                                'tabletag' + scope.row.status
                                            "
                                            effect="dark"
                                            >{{ scope.row.statusName }}</el-tag
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="item card sw">
                            <div class="title flexbet">
                                <div class="flexrow cent">
                                    <img
                                        class="img20"
                                        src="../../../static/pit/square.png"
                                    /><span>深基坑三维可视化</span>
                                </div>
                                <ul class="swbox flexbet">
                                    <li
                                        v-for="(item, index) in btns1"
                                        :key="index"
                                        class="btntag swtag"
                                        :class="
                                            index == active1 ? 'active0' : ''
                                        "
                                        @click="changeActive1(index)"
                                    >
                                        <img
                                            :src="
                                                index == active1
                                                    ? item.selectUrl
                                                    : item.url
                                            "
                                        />
                                        <span>{{ item.name }}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="imgbox">
                                <img
                                    class="bg"
                                    src="../../../static/pit/3D.svg"
                                />
                                <div class="flexbet topcover">
                                    <div class="iconbtn">
                                        深基坑实时变形监测
                                    </div>
                                </div>
                                <div class="botcover">
                                    图例
                                    <span
                                        ><span class="circle greenbg"></span
                                        >正常</span
                                    >
                                    <span
                                        ><span class="circle redbg"></span
                                        >预警</span
                                    >
                                    <span
                                        ><span class="circle yellowbg"></span
                                        >超限</span
                                    >
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item card height1">
                            <div class="title flexbet">
                                <div class="flexrow cent">
                                    <img
                                        class="img20"
                                        src="../../../static/pit/warn2.png"
                                    />
                                    <span class="bold">告警信息</span>
                                </div>
                                <span class="redtag">2条未处理</span>
                            </div>

                            <ul class="msgbox">
                                <li
                                    v-for="(item, index) in msgList"
                                    :key="index"
                                    :class="'msg' + item.status"
                                >
                                    <div class="flexbet">
                                        <span class="black">{{
                                            item.title
                                        }}</span>
                                        <span
                                            class="f12"
                                            :class="'font' + item.status"
                                            >{{ item.statusName }}</span
                                        >
                                    </div>

                                    <span class="desc f12">{{
                                        item.desc
                                    }}</span>
                                    <div class="mt10 flexbet cent">
                                        <span class="time">{{
                                            item.time
                                        }}</span>
                                        <div class="tagbox">
                                            <span class="tag mr10"
                                                >查看详情</span
                                            >
                                            <span
                                                class="tag"
                                                :class="'tag' + item.status"
                                                >{{
                                                    item.status == 0
                                                        ? "已处理"
                                                        : "处理"
                                                }}</span
                                            >
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="item card">
                            <div class="title flexbet">
                                <div class="flexrow cent">
                                    <img
                                        class="img20"
                                        src="../../../static/pit/loc.png"
                                    /><span>监测点分布</span>
                                </div>
                                <span class="blue f14"
                                    >查看地图 <i class="el-icon-arrow-right"></i
                                ></span>
                            </div>
                            <div class="pointbox">
                                <div class="flexbet">
                                    <ul class="flexbet">
                                        <li
                                            v-for="(item, index) in pointList"
                                            :key="index"
                                            class="flexcol"
                                        >
                                            <span class="f12">{{
                                                item.name
                                            }}</span>
                                            <span class="f18 bold black mt10"
                                                >{{ item.val }}处</span
                                            >
                                        </li>
                                    </ul>
                                </div>
                                <div class="imgbox">
                                    <img
                                        class="bg"
                                        src="../../../static/pit/demo.jpg"
                                    />
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            color: ["#165dff", "#ff7d00", "#3dd4a7", "#86909c"],
            topList: [
                {
                    name: "累计沉降量",
                    val: 18.2,
                    unit: "mm",
                    changeStatus: 1,
                    changeData: 0.2,
                },
                {
                    name: "水平位移",
                    val: 12.3,
                    unit: "mm",
                    changeStatus: 2,
                    changeData: 1.5,
                },
                {
                    name: "今日告警",
                    val: "2",
                    unit: "",
                    changeStatus: 0,
                    changeData: 1,
                },
            ],
            displaceList: [
                {
                    name: "最大累计沉降",
                    val: 18.7,
                    unit: "mm",
                    status: 0,
                    percent: 60,
                },
                {
                    name: "最大水平位移",
                    val: 12.3,
                    unit: "mm",
                    status: 1,
                    percent: 85,
                },
                {
                    name: "位移速率",
                    val: "0.2",
                    unit: "mm/天",
                    status: 0,
                    percent: 35,
                },
            ],
            topOpt1: [
                {
                    value: 1,
                    label: "全部类型",
                },
                {
                    value: 2,
                    label: "位移监测",
                },
                {
                    value: 3,
                    label: "沉降监测",
                },
                {
                    value: 4,
                    label: "倾斜监测",
                },
                {
                    value: 5,
                    label: "地下水位",
                },
                {
                    value: 6,
                    label: "支撑轴力",
                },
            ],
            type: 1,
            topOpt2: [
                {
                    value: 1,
                    label: "全部区域",
                },
                {
                    value: 2,
                    label: "东区",
                },
                {
                    value: 3,
                    label: "西区",
                },
                {
                    value: 4,
                    label: "南区",
                },
                {
                    value: 5,
                    label: "北区",
                },
                {
                    value: 6,
                    label: "中区",
                },
            ],
            area: 1,
            topOpt3: [
                {
                    value: 1,
                    label: "最近24小时",
                },
                {
                    value: 2,
                    label: "最近7天",
                },
                {
                    value: 3,
                    label: "最近30天",
                },
                {
                    value: 4,
                    label: "最近90天",
                },
                {
                    value: 5,
                    label: "自定义",
                },
            ],
            period: 1,
            monitorList: [
                {
                    name: "最大水平位移",
                    statusName: "安全",
                    data: 18.2,
                    unit: "mm",
                    changeStatus: 1,
                    changeData: 2.3,
                    percent: 50,
                },
                {
                    name: "最大沉降量",
                    statusName: "预警",
                    data: 26.8,
                    unit: "mm",
                    changeStatus: 2,
                    changeData: 5.7,
                    percent: 90,
                },
                {
                    name: "地下水位",
                    statusName: "正常",
                    data: 5.4,
                    unit: "m",
                    changeStatus: 1,
                    changeData: 0.3,
                    percent: 80,
                },
                {
                    name: "支撑轴力",
                    statusName: "正常",
                    data: 1250,
                    unit: "kN",
                    changeStatus: 0,
                    changeData: 0,
                    percent: 60,
                },
            ],
            totalList: [],
            btns: ["今日", "本周", "本月"],
            active0: 1,
            btns1: [
                {
                    name: "位移云图",
                    url: "../../../static/pit/eye.png",
                    selectUrl: "../../../static/pit/eye3.png",
                },
                {
                    name: "实时变形",
                    url: "../../../static/pit/arrow2.png",
                    selectUrl: "../../../static/pit/arrow3.png",
                },
                {
                    name: "监测点",
                    url: "../../../static/pit/loc2.png",
                    selectUrl: "../../../static/pit/loc3.png",
                },
            ],
            active1: 1,
            periodOpt: [
                {
                    value: 1,
                    label: "近7天",
                },
                {
                    value: 2,
                    label: "近30天",
                },
                {
                    value: 3,
                    label: "近90天",
                },
            ],
            waterPeriod: 1,
            msgList: [
                {
                    status: 2, ////0低优先级 1中优先级 2高优先级
                    statusName: "高优先级",
                    title: "墙体应力超限",
                    desc: "北侧墙体应力-QT07监测值27.3MPa，超过预警值25MPa",
                    time: "10:23:45",
                },
                {
                    status: 1,
                    statusName: "中优先级",
                    title: "支撑轴力预警",
                    desc: "南侧支撑轴力-ZC05监测值485kN，接近预警值500kN",
                    time: "09:15:22",
                },
                {
                    status: 0,
                    statusName: "低优先级",
                    title: "渗流异常",
                    desc: "北侧边坡渗流监测点-SL04渗流速度异常",
                    time: "昨天 16:45:12",
                },
                {
                    status: 0,
                    statusName: "设备离线",
                    title: "渗流异常",
                    desc: "东侧位移监测点-WY09设备离线",
                    time: "昨天 14:22:38",
                },
            ],
            tableData: [
                {
                    location: "东侧",
                    name: "支撑轴力-ZC01",
                    type: 1,
                    typeName: "轴力",
                    realData: 325,
                    unit: "kN",
                    warningData: 500,
                    status: 0, //0正常 1预警 2超限
                    statusName: "正常",
                },
                {
                    location: "南侧",
                    name: "支撑轴力-ZC05",
                    type: 1,
                    typeName: "轴力",
                    realData: 485,
                    unit: "kN",
                    warningData: 500,
                    status: 1,
                    statusName: "预警",
                },
                {
                    location: "西侧",
                    name: "墙体应力-QT03",
                    type: 2,
                    typeName: "应力",
                    realData: 18.2,
                    unit: "MPa",
                    warningData: 25,
                    status: 0,
                    statusName: "正常",
                },
                {
                    location: "北侧",
                    name: "墙体应力-QT07",
                    type: 2,
                    typeName: "应力",
                    realData: 27.3,
                    unit: "MPa",
                    warningData: 25,
                    status: 2,
                    statusName: "超限",
                },
            ],
            pointList: [
                {
                    name: "位移监测",
                    val: 16,
                },
                {
                    name: "应力监测",
                    val: 12,
                },
            ],
        };
    },
    computed: {},
    watch: {},
    mounted() {
        this.totalList = [
            {
                name: "监测点总数",
                realTimeData: 128,
                unit: "",
                changeStatus: 1, //0降低 1增长
                changeData: 5.2,
                iconUrl: "../../static/pit/location.png",
            },
            {
                name: "报警总数",
                realTimeData: 23,
                unit: "",
                changeStatus: 0, //0降低 1增长
                changeData: 12.3,
                iconUrl: "../../static/pit/warn.png",
            },
            {
                name: "设备在线率",
                realTimeData: 96.8,
                unit: "%",
                changeStatus: 1, //0降低 1增长
                changeData: 2.1,
                iconUrl: "../../static/pit/wifi.png",
            },
            {
                name: "数据采集量",
                realTimeData: 12.5,
                unit: "K",
                changeStatus: 1, //0降低 1增长
                changeData: 8.2,
                iconUrl: "../../static/pit/data.png",
            },
        ];
        this.displacementTrendFn();
        this.waterTrendFn();
        this.safeTrendFn();
        this.pointTrendFn();
    },
    methods: {
        displacementTrendFn() {
            let displacement = this.$echarts.init(
                document.getElementById("displacementTrend")
            );
            displacement.setOption({
                color: ["#4A81FF", "#F53F3F", "#FFAA33", "#FFAA33"],
                grid: {
                    left: "2%",
                    right: "2%",
                    top: "10%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "",
                    },
                },
                legend: {
                    top: "0%",
                    left: "center",
                    itemWidth: 35,
                    itemHeight: 10,
                    textStyle: {
                        color: "#7a7b7c",
                    },
                    data: [
                        "沉降量(mm)",
                        "水平位移(mm)",
                        "沉降预警值(mm)",
                        "水平位移预警值(mm)",
                    ],
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false, //x轴两边不留空白
                        axisLabel: {
                            rotate: 45,
                            interval: 0,
                            margin: 15, // 调整标签与刻度线之间的距离
                        },
                        axisTick: {
                            show: false,
                            //alignWithLabel: true,
                        },
                        data: [
                            "06-10",
                            "06-12",
                            "06-14",
                            "06-16",
                            "06-18",
                            "06-20",
                            "06-22",
                            "06-24",
                            "06-26",
                            "06-28",
                            "06-30",
                            "07-02",
                            "07-04",
                            "07-06",
                            "07-08",
                            "07-10",
                            "07-12",
                            "07-14",
                            "现在",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        max: 30,
                        splitNumber: 5,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#EBEEF5",
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#7a7b7c",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "沉降量(mm)",
                        type: "line",
                        areaStyle: {
                            color: "#E7EEFF",
                        },
                        symbol: "circle",
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 3,
                                },
                            },
                        },
                        data: [
                            5.2, 6.1, 7.5, 8.3, 9.5, 10.8, 11.9, 12.8, 13.5,
                            14.2, 15.1, 16, 16.8, 17.5, 18, 18.3, 18.5, 18.6,
                            18.7,
                        ],
                    },
                    {
                        name: "水平位移(mm)",
                        type: "line",
                        areaStyle: {
                            color: "#E6E2F3",
                        },
                        symbol: "circle",
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 3,
                                },
                            },
                        },
                        data: [
                            2.1, 2.9, 3.8, 4.5, 5.3, 6.2, 7, 7.8, 8.5, 9.2, 9.8,
                            10.4, 10.9, 11.4, 11.8, 12, 12.1, 12.2, 12.3,
                        ],
                    },
                    {
                        name: "沉降预警值(mm)",
                        type: "line",
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 3,
                                    type: "dotted",
                                },
                            },
                        },
                        // emphasis: {
                        //     focus: "series",
                        // },
                        showSymbol: false,
                        data: [
                            30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
                            30, 30, 30, 30, 30, 30,
                        ],
                    },
                    {
                        name: "水平位移预警值(mm)",
                        type: "line",
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 3,
                                    type: "dotted",
                                },
                            },
                        },
                        // emphasis: {
                        //     focus: "series",
                        // },
                        showSymbol: false,
                        data: [
                            15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15,
                            15, 15, 15, 15, 15, 15,
                        ],
                    },
                ],
            });
        },
        pointTrendFn() {
            let pointTrend = this.$echarts.init(
                document.getElementById("pointTrend")
            );
            pointTrend.setOption({
                color: ["#00B42A", "#FF7D00", "#F53F3F"],
                grid: {
                    left: "2%",
                    right: "2%",
                    top: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "",
                    },
                },

                xAxis: {
                    max: 100,
                    splitNumber: 10,
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    type: "value",
                    max: 100,
                    splitNumber: 10,
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: "正常",
                        symbolSize: 17,
                        data: [
                            [20, 20],
                            [20, 45],
                            [20, 70],
                            [40, 25],
                            [40, 50],
                            [40, 75],
                            [60, 20],
                            [60, 45],
                            [60, 70],
                            [80, 25],
                            [80, 50],
                            [80, 75],
                        ],
                        type: "scatter",
                    },
                    {
                        name: "预警",
                        symbolSize: 17,
                        data: [
                            [30, 35],
                            [30, 60],
                            [70, 35],
                            [70, 60],
                        ],
                        type: "scatter",
                    },
                    {
                        name: "报警",
                        symbolSize: 17,
                        data: [[50, 45]],
                        type: "scatter",
                    },
                ],
            });
        },
        changeActive0(index) {
            this.active0 = index;
        },
        changeActive1(index) {
            this.active1 = index;
        },
        waterTrendFn() {
            let waterTrend = this.$echarts.init(
                document.getElementById("waterTrend")
            );
            waterTrend.setOption({
                color: ["rgba(15,198,195)"],
                grid: {
                    left: "6%",
                    right: "4%",
                    top: "2%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: [
                    {
                        type: "category",
                        axisLabel: {
                            margin: 10, // 调整标签与刻度线之间的距离
                        },
                        axisTick: {
                            show: false,
                        },
                        data: [
                            "06-10",
                            "06-11",
                            "06-12",
                            "06-13",
                            "06-14",
                            "06-15",
                            "06-16",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        min: 4,
                        max: 6.5,
                    },
                ],
                series: [
                    {
                        type: "bar",
                        emphasis: {
                            focus: "series",
                        },

                        data: [6.2, 6, 5.8, 5.9, 5.7, 5.5, 5.4],
                    },
                ],
            });
        },
        safeTrendFn() {
            let safeTrend = this.$echarts.init(
                document.getElementById("safeTrend")
            );
            safeTrend.setOption({
                color: ["#00B42A", "#FF7D00", "#F53F3F"],
                grid: {
                    left: "2%",
                    right: "2%",
                    top: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "",
                    },
                },
                xAxis: {
                    splitLine: {
                        //x网格样式
                        show: true,
                        lineStyle: {
                            color: "#E0E6F1",
                            type: "solid",
                            width: "1",
                        },
                    },
                    axisTick: {
                        alignWithLabel: true,
                    },
                    data: ["低", "中", "高", "极高"],
                },
                yAxis: {
                    type: "category",
                    splitLine: {
                        //x网格样式
                        show: true,
                        lineStyle: {
                            color: "#E0E6F1",
                            type: "solid",
                            width: "1",
                        },
                    },
                    axisTick: {
                        alignWithLabel: true,
                    },
                    data: ["低", "中", "高", "极高"],
                },
                series: [
                    {
                        name: "正常",
                        symbolSize: 17,
                        data: [
                            ["低", "中"],
                            ["中", "低"],
                            ["中", "中"],
                        ],
                        type: "scatter",
                    },
                    {
                        name: "预警",
                        symbolSize: 17,
                        data: [
                            ["低", "高"],
                            ["低", "极高"],
                            ["中", "高"],
                            ["中", "极高"],
                            ["高", "低"],
                            ["高", "中"],
                            ["极高", "低"],
                            ["极高", "中"],
                        ],
                        type: "scatter",
                    },
                    {
                        name: "报警",
                        symbolSize: 25,
                        data: [
                            ["高", "高"],
                            ["高", "极高"],
                            ["极高", "高"],
                        ],
                        type: "scatter",
                    },
                ],
            });
        },
    },
};
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    background: #f5f5f5;
    padding: 20px 10px;
    .content {
        background: #fff;
        padding: 30px;
        font-size: 16px;
        color: #7a7b7c;
        .card {
            border-radius: 10px;
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    }
}

.flexrow {
    display: flex;
    flex-direction: row;
}
.flexcol {
    display: flex;
    flex-direction: column;
}

.flexbet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.flexwrap {
    display: felx;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.cent {
    align-items: center;
}
.f14 {
    font-size: 14px;
}
.f12 {
    font-size: 12px;
}
.f16 {
    font-size: 16px;
}
.f18 {
    font-size: 18px;
}
.f20 {
    font-size: 20px;
}
.f22 {
    font-size: 22px;
}
.f24 {
    font-size: 24px;
}
.bold {
    font-weight: 800;
}
.mb30 {
    margin-bottom: 30px;
}
.mt10 {
    margin-top: 10px;
}
.mr20 {
    margin-right: 20px;
}
.mr10 {
    margin-right: 10px;
}

.pad20 {
    padding: 20px;
}
.img20 {
    width: 20px;
    height: 20px;
}
.top {
    margin-bottom: 30px;
    .left {
        font-size: 14px;
        padding: 20px;
        width: 25%;
        color: #fff;
        background: #165dff;
        border-radius: 10px 0 0 10px;
        align-items: center;
        justify-content: center;
        .desc {
            color: #cfdeff;
            margin: 15px 0px;
        }
    }
    .right {
        flex: 1;

        width: 100%;
        li {
            width: 33%;
            padding: 20px;
            border-radius: 10px;
            color: #7a7b7c;
            border-right: 1px solid #f2f6fc;

            .f18 {
                font-weight: 800;
                margin-top: 5px;
            }
            .font0 {
                color: #165dff;
            }
            .font1 {
                color: #ff7d00;
            }
            .font2,
            .font3 {
                color: #00b42a;
            }
        }
    }
    .el-select {
        margin-top: 10px;
        width: 150px;
        padding-right: 10px;
    }
}
.displaceList {
    width: 100%;
    margin-bottom: 30px;
    li {
        width: 33%;
        border: 1px solid #f2f6fc;
        padding: 20px;
        border-radius: 10px;
    }
    li:hover {
        border: 1px solid #85a8fa;
        background: #e7eeff;
    }
}
.monitorList {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 20px 0;

    .boxcard {
        width: 24%;
        //color: #7a7b7c;
        border-radius: 15px;
        .tit {
            align-items: center;
            .tag {
                border-radius: 30px;
                width: 50px;
                text-align: center;
                font-size: 14px;
                padding: 3px 0;
            }
            .tag0 {
                color: #165dff;
                background: #e7eeff;
            }
            .tag1 {
                color: #ff7d00;
                background: #fff2e5;
            }
            .tag2 {
                color: #3dd4a7;
                background: #e7f9f9;
            }
            .tag3 {
                color: #86909c;
                background: #f3f4f5;
            }
        }
        .mid {
            align-items: flex-end;
            // padding: 20px 0;
            // border-bottom: 1px solid #f2f6fc;
        }

        .bigfont {
            font-size: 36px;
            color: #000;
            font-weight: 800;
            margin-right: 10px;
        }
    }
    .bord0 {
        border-left: 5px solid #165dff;
    }
    .bord1 {
        border-left: 5px solid #ff7d00;
    }
    .bord2 {
        border-left: 5px solid#3dd4a7;
    }
    .bord3 {
        border-left: 5px solid #86909c;
    }
}

.item {
    padding: 20px;
    margin-bottom: 30px;
    transition: transform 0.3s ease-out;
}
.item:hover {
    transform: scale(1.02);
}

item:mouseout {
    transform: scale(1);
}
.height1 {
    height: 530px;
}

.title {
    width: 100%;
    margin-bottom: 20px;
    height: 40px;
    align-items: center;
    .bold {
        color: #000;
        font-size: 20px;
    }
    .rightfont {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .img20 {
        margin-right: 10px;
    }
}
.msgbox {
    width: 100%;
    height: 430px;
    overflow: scroll;
    overflow-x: hidden;
    // border: 1px solid red;
    li {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        font-size: 14px;
        .black {
            display: inline-block;
        }
        .font0 {
            color: #6b7280;
        }
        .font1 {
            color: #ffaa33;
        }
        .font2 {
            color: #f87272;
        }

        .time {
            font-size: 12px;
            display: inline-block;
            width: 90px;
        }
        .tagbox {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            .tag {
                padding: 3px 10px;
                background: #fff;
                font-size: 12px;
                border-radius: 5px;
                border: 1px solid #e5e7eb;
            }
            .tag0 {
                border: none;
                color: #fff;
                background: #6b7280 !important;
            }
            .tag1 {
                border: none;
                color: #fff;
                background: #ffaa33 !important;
            }
            .tag2 {
                border: none;
                color: #fff;
                background: #f87272 !important;
            }
        }
    }
    .msg2 {
        border-left: 4px solid #f87272;
        background: #fff8f8;
    }
    .msg1 {
        border-left: 4px solid #ff7d00;
        background: #fff8f2;
    }
    .msg0 {
        border-left: 4px solid #86909c;
        background: #f9f9fa;
    }
}

.btntag {
    display: inline-block;
    padding: 3px 12px;
    background: #f2f3f5;
    color: #000;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

.sw {
    .swbox {
        .swtag {
            display: flex;
            flex-direction: row;
            align-items: center;
            img {
                width: 15px;
                height: 15px;
                margin-right: 10px;
            }
        }
    }
    .imgbox {
        position: relative;
        width: 100%;
        height: 380px;
        .bg {
            width: 100%;
            height: 100%;
        }
        .topcover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            .iconbtn {
                background: rgba(256, 256, 256, 0.6);
                border-radius: 5px;
                font-size: 14px;
                padding: 3px 10px;
                color: #6c6b6b;
            }
        }
        .botcover {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            flex-direction: column;
            background: rgba(256, 256, 256, 0.5);
            border-radius: 5px;
            font-size: 12px;
            padding: 12px;
            line-height: 20px;
            color: #333;
        }
    }
}

.table {
    .imgbox {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #e7eeff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
    }
    .tabletag {
        border-radius: 30px;
        width: 45px;
        padding: 0;
        text-align: center;
        height: 25px;
        line-height: 22px;
        border: none;
    }
    .tabletag0 {
        color: #36d399;
        background: #ebfbf5;
    }
    .tabletag1 {
        color: #ffaf40;
        background: #fff6ea;
    }
    .tabletag2 {
        color: #f87272;
        background: #fef1f1;
    }
}
.redtag {
    font-size: 12px;
    color: #f87272;
    background: #fef1f1;
    border-radius: 30px;
    padding: 5px 10px;
}

.pointbox {
    ul {
        width: 100%;
        li {
            width: 48%;
            background: #f9fafb;
            padding: 10px 15px;
            border-radius: 10px;
        }
    }
    .imgbox {
        width: 100%;
        height: 200px;
        border-radius: 10px;
        margin-top: 20px;
        img {
            width: 100%;
            height: 200px;
            border-radius: 10px;
        }
    }
}

.active0 {
    background: #2762ef !important;
    color: #fff !important;
}

.black {
    color: #000;
}
.red {
    color: #f53f3f;
}
.pink {
    color: #f87272;
}
.pinkbg {
    background: #fef1f1 !important;
}
.yellow {
    color: #ffaf40;
}
.green {
    color: #36d399;
}
.blue {
    color: #2762ef;
}
.greenbg {
    background: #36d399;
}
.yellowbg {
    background: #ff7d00;
}
.redbg {
    background: #f53f3f;
}
.circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

.select {
    margin-right: 10px;
    width: 150px;
}

.warntag {
    color: #4d4204 !important;
    background: #f7f2be !important;
}
/deep/.el-table thead th {
    background: #f2f2f2 !important;
    color: #333;
    font-weight: 400;
}
.topfont {
    color: #000;
    font-weight: 800;
    font-size: 30px;
}
.tablebox {
    .bot {
        color: #333;
        font-size: 14px;
        margin-top: 20px;
    }
}
.bluebtn {
    background: #165dff;
    color: #fff;
    font-size: 16px;
    height: 40px;
    border-radius: 10px;
}
.iconbox {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 10px;
    background: #e7eeff;
}
</style>
